<template>
  <div class="total-wrap" style="margin-top: 6upx">
    <div class="node-container">
      <div class="node-container-left">
        <div class="tag-container">
          <!-- <img v-if="isMainNode" :src="nodeIconUrl"/> -->
          <div  class="node-tag-container">
            <div class="node-tag" :style="{background: isNewest?'#EC6104':'#dcdcdc', marginTop:'0'}"></div>
          </div>
        </div>
		<div class="line-container" style="height:88upx;padding-top:8upx">
        <!-- <div class="line-container" :style="{height: isMainNode?'142upx':'88upx', paddingTop: isMainNode?'22upx':'8upx'}"> -->
          <div v-if="!isFirst" class="line" style="height: 80upx;color: #EC6104;"></div>
        </div>
      </div>
      <div class="node-container-right" style="padding-top: 8upx">
        <!-- <div v-if="isMainNode" class="node-title" :style="{color: isNewest?'#222':'#999'}">{{nodeData.statusName}}</div> -->
        <div class="node-desc" :style="{color: isNewest?'#4b4b4b':'#999', marginTop:'0'}">{{acceptStationFixed}}</div>
        <!-- <div v-if="nodeData.phone" class="node-phone">{{nodeData.phone}}</div> -->
        <div class="node-time">{{nodeData.time}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isNewest: {
      type: Boolean,
      default: false
    },
    isFirst: {
      type: Boolean,
      default: false
    },
    isMainNode: {
      type: Boolean,
      default: false
    },
    nodeData: {
      type: Object,
      default () {
        return {
		  "time": "2020-04-15 11:59:11",
		  "ftime": "2020-04-15 11:59:11",
		  "context": "xxx"
        }
      }
    }
  },
  computed: {
    // nodeIconUrl () {
    //   if (this.nodeData.status === 'WATTING_PAY') { // 待付款
    //     return this.isNewest ? '/static/images/ic-order-commit.png' : '/static/images/ic-order-commit-G.png'
    //   } else if (this.nodeData.status === 'PAYED') { // 待发货
    //     return this.isNewest ? '/static/images/ic-paied.png' : '/static/images/ic-paied-G.png'
    //   } else if (this.nodeData.status === 'WATTING_DELIVER') { // 已揽件
    //     return this.isNewest ? '/static/images/ic-pacakaging.png' : '/static/images/ic-pacakaging-G.png'
    //   } else if (this.nodeData.status === 'DELIVERING') { // 运输中
    //     return this.isNewest ? '/static/images/ic-sending.png' : '/static/images/ic-sending-G.png'
    //   } else if (this.nodeData.status === 'COMPLETE') { // 已完成
    //     return this.isNewest ? '/static/images/ic-delivering.png' : '/static/images/ic-delivering-G.png'
    //   }
    // },
    acceptStationFixed () {
      if (!this.nodeData.context) return ''
      return this.nodeData.context.replace(/(\d{3})\d{4}(\d{4})/, '')
    }
  }
}
</script>
<style lang="scss" scoped>
.total-wrap {
  margin-top: 22upx;
  // width: 100%;
  .node-container {
    // width: 100%;
    height: auto;
    display: flex;
    &-left {
      width: 44upx;
      height: auto;
      .tag-container {
        width: 44upx;
        height: 44upx;
        img {
          width: 44upx;
          height: 44upx;
        }
        .node-tag-container {
          width: 44upx;
          height: 44upx;
          display: flex;
          justify-content: center;
          align-items: center;
          .node-tag {
            width: 14upx;
            height: 14upx;
            background-color: #dcdcdc;
            border-radius: 50%;
          }
        }
      }
      .line-container {
        box-sizing: border-box;
        width: 44upx;
        display: flex;
        align-items: center;
        justify-content: center;
        .line {
          width: 2upx;
          background-color: #dcdcdc;
        }
      }
    }
    &-right {
      flex: 1;
      box-sizing: border-box;
      padding: 0 10upx 0 24upx;
      .node-title {
        width: 100%;
        height: 40upx;
        line-height: 44upx;
        color: #222;
        font-size: 28upx;
        font-family: 'PingFangSC-Medium';
      }
      .node-desc {
        margin-top: 16upx;
        width: 100%;
        min-height: 36upx;
        line-height: 36upx;
        color: #222;
        font-size: 28upx;
        font-family: 'PingFangSC-Regular';
        word-wrap: break-word;
        word-break: normal;
      }
      .node-phone {
        margin-top: 8upx;
        width: 100%;
        height: 26upx;
        line-height: 26upx;
        color: #FE4E2C;
        font-size: 26upx;
        font-family: 'Avenir-Medium';
      }
      .node-time {
        margin-top: 12upx;
        width: 100%;
        height: 34upx;
        line-height: 34upx;
        color: #999;
        font-size: 28upx;
        font-family: 'Avenir-Book';
      }
    }
  }
}
</style>